<template>
  <div>
    <div class="box">
      <header>请输入修改信息</header>
      <div class="box2">
        <el-form :model="form" :label-width="formLabelWidth">
          <el-form-item label="楼盘名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="房源类型" :label-width="formLabelWidth">
            <el-input v-model="form.type" autocomplete="off" />
          </el-form-item>
          <el-form-item label="门牌号" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off" />
          </el-form-item>
          <el-form-item label="房源户型" :label-width="formLabelWidth">
            <el-input v-model="form.hometype" autocomplete="off" />
          </el-form-item>
          <el-form-item label="户主" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(form as any)"
              >确定</el-button
            >
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import { reactive } from "vue";
import { modify } from "../axios/http";
const store = useStore();
console.log(store.state.residents);
const formLabelWidth = "1.75rem";
const form = reactive({
  name: "",
  type: "",
  title: "",
  num: "",
  hometype: "",
});

const submitForm = async (indx: object) => {
  await modify(store.state.residents.id, indx);
  store.commit("bool");
  store.commit("witch");
  form.hometype = "";
  form.type = "";
  form.title = "";
  form.hometype = "";
  form.num = "";
  form.name = "";
};
function cancel() {
  store.commit("bool");
}
</script>
<style scoped lang="scss">
.box {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.0875rem;
  display: flex;
  flex-direction: column;
}
header {
  margin: 0.375rem;
}
.box2 {
  padding: 0.25rem;
}
</style>
